<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  user: {
    id: number;
    firstName: string;
    secondName: string;
    description: string;
  };
}>();

const html = `<span class="text-green-500">面包会有的！<i class="el-icon-star-off text-blue-500"></i></span>`;

const fullName = computed(
  () => `${props.user.firstName ?? "-"}.${props.user.secondName ?? "-"}`
);
</script>

<template>
  <div :class="[$style.userItem, 'bg-purple-100 py-5 px-10 rounded-md h-96']">
    <img class="w-20 h-20" src="../assets/user.png" alt="User Image" />
    <div>
      <h1>{{ fullName }}</h1>
      <div class="font-bold">{{ user.description }}</div>
      <div v-html="html"></div>
    </div>
    <button
      class="bg-purple-500 text-white py-1 px-2 rounded-md hover:opacity-50"
      @click="$emit('onRemoveUser', user.id)"
    >
      Remove
    </button>
  </div>
</template>

<style module>
.userItem {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 10px;
  color: #333;
}
</style>
